<template>
  <view class="ticket-usage-page">
    <!-- 页面标题 -->
    <view class="page-title">
      <text>扣票记录</text>
    </view>
    
    <!-- 记录列表容器 -->
    <view class="record-list">
      <!-- 循环渲染每条记录 -->
      <view class="record-item" v-for="(record, index) in ticketRecords" :key="index">
        <!-- 记录头部信息 -->
        <view class="record-header">
          <!-- 时间信息（突出显示） -->
          <text class="record-time">{{ record.time }}</text>
          
          <!-- 项目名称 -->
          <view class="project-tag">
            <text class="project-name">{{ record.project }}</text>
          </view>
        </view>
        
        <!-- 记录主体内容 -->
        <view class="record-content">
          <!-- 票务信息区域 -->
          <view class="info-section">
            <view class="info-row">
              <text class="info-label">套票名称：</text>
              <text class="info-value">{{ record.ticketName }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">套票类型：</text>
              <text class="info-value">{{ record.ticketType }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">套票余量：</text>
              <text class="info-value remaining">{{ record.ticketRemaining }}</text>
            </view>
            <view class="info-row" v-if="record.deductCount">
              <text class="info-label">扣验数量：</text>
              <text class="info-value deduct">{{ record.deductCount }}</text>
            </view>
          </view>
          
          <!-- 会员信息区域 -->
          <view class="info-section">
            <view class="info-row">
              <text class="info-label">会员姓名：</text>
              <text class="info-value">{{ record.memberName }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">会员卡号：</text>
              <text class="info-value">{{ record.memberId }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">手机号：</text>
              <text class="info-value">{{ record.phone }}</text>
            </view>
          </view>
          
          <!-- 手环信息和操作区域 -->
          <view class="band-section">
            <!-- 绑定手环信息（部分记录有） -->
            <text class="band-info" v-if="record.bandInfo">{{ record.bandInfo }}</text>
            
            <!-- 解手环按钮（部分记录有） -->
            <button class="unbind-btn" v-if="record.showUnbind" @click="handleUnbind(index)">解手环</button>
          </view>
        </view>
      </view>
      
      <!-- 空状态提示 -->
      <view class="empty-state" v-if="ticketRecords.length === 0">
        <text class="empty-text">暂无扣票记录</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 套票使用记录数据
      ticketRecords: [
        {
          time: '2025-10-24 15:00:00',
          project: '闸机1',
          ticketName: '8次票',
          ticketType: '计次票',
          ticketRemaining: '5次',
          memberName: '张三',
          memberId: '12345678',
          phone: '152xxxxxxxx',
          deductCount: '2次',
          bandInfo: '绑定手环: 1/2',
          showUnbind: true
        },
        {
          time: '2025-10-24 15:00:00',
          project: '闸机1',
          ticketName: '100分钟票',
          ticketType: '计时票',
          ticketRemaining: '50分钟',
          memberName: '张三',
          memberId: '12345678',
          phone: '152xxxxxxxx',
          deductCount: '15分钟',
          bandInfo: '',
          showUnbind: false
        },
        {
          time: '2025-10-24 15:00:00',
          project: '闸机1',
          ticketName: '惊喜月票',
          ticketType: '计期票',
          ticketRemaining: '30天',
          memberName: '张三',
          memberId: '12345678',
          phone: '152xxxxxxxx',
          deductCount: '',
          bandInfo: '绑定手环: 4/4',
          showUnbind: false
        }
      ]
    };
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.ticketDeductionRecord')
  	});
  },
  methods: {
    // 解手环操作
    handleUnbind(index) {
      uni.showModal({
        title: '提示',
        content: '确定要解除手环绑定吗？',
        success: (res) => {
          if (res.confirm) {
            // 实际项目中这里会调用接口执行解绑定操作
            this.ticketRecords[index].showUnbind = false;
            this.ticketRecords[index].bandInfo = '已解除手环绑定';
            uni.showToast({
              title: '解绑定成功',
              icon: 'success'
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
/* 页面容器 - 100%高度 */
.ticket-usage-page {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 20px;
}

/* 页面标题 */
.page-title {
  padding: 16px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 12px;
}

.page-title text {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* 记录列表容器 - 控制边距 */
.record-list {
  padding: 0 12px;
}

/* 单条记录样式 */
.record-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

.record-item:active {
  transform: scale(0.98);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 记录头部 */
.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f5f5f5;
}

/* 时间样式 - 突出显示 */
.record-time {
  font-size: 16px;
  color: #333333;
  font-weight: 500;
}

/* 项目标签 */
.project-tag {
  background-color: #e6f7ff;
  padding: 4px 12px;
  border-radius: 12px;
}

.project-name {
  font-size: 13px;
  color: #1890ff;
  font-weight: 500;
}

/* 记录主体内容 */
.record-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 信息区块 */
.info-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 信息行 */
.info-row {
  display: flex;
  align-items: center;
  line-height: 1.5;
}

/* 信息标签 */
.info-label {
  font-size: 14px;
  color: #999;
  min-width: 80px;
}

/* 信息值 */
.info-value {
  font-size: 14px;
  color: #333;
  flex: 1;
  text-align: left;
}

/* 剩余量特殊样式 */
.info-value.remaining {
  color: #52c41a;
  font-weight: 500;
}

/* 扣减量特殊样式 */
.info-value.deduct {
  color: #ff4d4f;
  font-weight: 500;
}

/* 手环信息区域 */
.band-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px dashed #f0f0f0;
}

/* 绑定手环信息样式 */
.band-info {
  font-size: 14px;
  color: #1890ff;
}

/* 解手环按钮样式 */
.unbind-btn {
  width: 80px;
  height: 32px;
  line-height: 32px;
  background: linear-gradient(135deg, #ff7a45 0%, #ff4d4f 100%);
  color: #ffffff;
  font-size: 14px;
  border-radius: 4px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(255, 77, 79, 0.2);
  transition: all 0.3s;
}

.unbind-btn:active {
  background: linear-gradient(135deg, #ff4d4f 0%, #d4380d 100%);
  transform: translateY(1px);
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  background-color: #fff;
  border-radius: 8px;
  margin: 20px;
}

.empty-text {
  font-size: 14px;
  color: #999;
  text-align: center;
}

/* 响应式设计 */
@media screen and (max-width: 320px) {
  .info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .info-label {
    min-width: auto;
  }
  
  .band-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .unbind-btn {
    width: 100%;
  }
}
</style>